<template>
  <div>
    <h1>欢迎来咕嘟咕嘟发给到首页</h1>
    <template>
      <div>
        <div v-for="(m, index) in messages" :key="m.id ? m.id : index">
          {{ m.role === "user" ? "User: " : "AI: " }}
          <div v-for="part in m.parts" :key="part.id">
            <div v-if="part.type === 'text'">{{ part.text }}</div>
          </div>
        </div>

        <form @submit="handleSubmit">
          <input
            v-model="input"
            @change="handleInputChangeA"
            placeholder="Say something..."
          />
        </form>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
// 修复：useChat 不是 "@ai-sdk/vue" 的导出成员，需根据实际库导入
// 假设正确的导入路径为 "@ai-sdk/vue/chat"
import { useChat } from "@ai-sdk/vue";
const { messages, input, handleSubmit, handleInputChange } = useChat();
const handleInputChangeA = () => {
  console.log("messages", messages);

  handleInputChange();
};
</script>
<style scoped lang="scss"></style>
